<template>
    <div class="border-w">
    <div class="zhunkao-less" v-if="JSON.stringify(info) != '{}' && JSON.stringify(infodetail) !='{}'">
        <div class="canvas" ref="canvas">
            <div class="zk-title1">
                {{fxdata.examinationName}}
            </div>
            <div class="zk-name">准考证</div>
            <div class="zhunkao-box clearfix">
                <div class="zhunkao-left">
                    <span>GPC编号：{{info.gpcCode}}</span>
                    <span>中文名：{{infodetail.chName}}</span>
                    <span>英文名：{{infodetail.enName}}</span>
                    <span>考试科目：{{infodetail.chName}}</span>
                    <span>科目等级：{{infodetail.subjectsLevel.name}}</span>
                     <span>考场号：{{infodetail.examinationRoom ? infodetail.examinationRoom.name : ''}}</span>
                     <span>座位号：{{infodetail.seat}}</span>
                </div>
                <div class="zhunkao-right">
                    <img :src="img" alt="">
                </div>
            </div>
            <div class="zk-title" style="padding-top:20px;">
                <span>准考证号：{{infodetail.examNumber}}</span> 
            </div>
            <div class="zk-title">
                <span>考试时间：{{infodetail.examination.examTime}}</span>
            </div>
            <div class="zk-title" style="padding-bottom:20px;">
                <span>考试地点：{{fxdata.examinationAddress}}</span>
            </div>
        </div>
    </div>
    </div>
</template>
<script>
import html2canvas from 'html2canvas';
import apiHttp from '../../../api/index.js'
export default {
    data(){
        return{
            info:{},
            fxdata:{},
            infodetail:{},
            img:''
        }
    },
    mounted(){
        this.urlPath()
    },
    methods:{
        savecanvas(){
            let canvas = document.querySelector('.canvas');
            let that = this;
            html2canvas(canvas,{scale:2,logging:false,useCORS:true}).then(function(canvas) {
                    let type = 'png';
                    let imgData = canvas.toDataURL(type);
                    // 照片格式处理
                    let _fixType = function(type) {
                        type = type.toLowerCase().replace(/jpg/i, 'jpeg');
                        let r = type.match(/png|jpeg|bmp|gif/)[0];
                        return 'image/' + r;
                    };
                    imgData = imgData.replace(_fixType(type),'image/octet-stream');
                    let filename = "UUSound" + '.' + type;
                    that.saveFile(imgData,filename);
            });
        },
        saveFile(data, filename){
            let save_link = document.createElementNS('http://www.w3.org/1999/xhtml', 'a');
            save_link.href = data;
            save_link.download = filename;
        
            let event = document.createEvent('MouseEvents');
            event.initMouseEvent('click', true, false, window, 0, 0, 0, 0, 0, false, false, false, false, 0, null);
            save_link.dispatchEvent(event);
        },
        // 获取url参数
        urlPath(){
            this.fxdata = eval('(' + this.$route.query.fxdata + ')')
            this.detail(this.fxdata.id)
            this.infos()
        },
        // 获取个人信息
        infos(){
            apiHttp.apiIndex.examDetail('').then(resp=>{
                if(resp.code == 0){
                    this.info = resp.data
                    apiHttp.apiIndex.infoImgBase64(this.info.user.header).then(resp=>{
                        if(resp.code == 0){
                            this.img = `data:image/jpg;base64,${resp.data}`
                            this.savecanvas()
                        }
                    })
                }
            })
        },
        detail(id){
            apiHttp.apiIndex.orderDetail(id).then(resp=>{
                if(resp.code == 0){
                    this.infodetail = resp.data
                }
            })
        }
    }
}
</script>
<style lang="less">
.border-w{
    padding: 20px;
    width: 300px;
     margin: 0 auto;
}
.zhunkao-less{
    width: 300px;
    border:solid 1px #000;
    border-radius: 5px;
    .zk-title1{
        padding: 20px 0 10px 0;
    }
    .zk-name{
        font-size: 20px;
    }
    .zk-title{
        line-height: 30px;
        text-align: left;
        width: 90%;
        padding: 0 5%;
        span{
            display: block;
            font-size: 14px;
        }
    }
    .zhunkao-box{
        width: 90%;
        height: auto;
        padding: 0 5%;
        .zhunkao-left{
            width: 60%;
            height: auto;
            text-align: left;
            float: left;
            span{
                display: block;
                line-height: 30px;
                font-size: 14px;
            }
        }
        .zhunkao-right{
            width: 40%;
            height: 210px;
            float: left;
            display: flex;
            align-items: center;
            img{
                width: 100%;
                align-items: center;
            }
        }
    }
    
}
</style>
